<html>

<head>
    <link rel="stylesheet" href="../libs/amazeui/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/css/q.css" />
</head>

<body>
    <header class="am-topbar am-topbar-fixed-top">
        <div class="am-container">
            <div class="am-collapse am-topbar-collapse am-text-center" id="collapse-head">
                <h1>questionnaire survey</h1>
            </div>
        </div>
    </header>
    <div id="app">
        <nav class="scrollspy-nav am-topbar am-topbar-fixed-bottom">
            <div class="am-container">
                <div class="am-collapse am-topbar-collapse am-text-center" id="collapse-head">
                    <ul>
                        <li v-for="(item, index) in skillPoints">
                            <a v-bind:href="'#detail' + (index+1)">{{item.Name}}</a>
                        </li>
                        <li>
                            <a v-bind:href="'#sm'">提交</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div v-for="(item, index) in skillPoints" class="detail" v-bind:id="'detail' + (index+1)" v-bind:class="'color' + (index+1)">
            <!---->
            <div class="am-g am-container">
                <div class="am-u-lg-12">
                    <h2 class="detail-h2">{{item.Name}}</h2>
                    <div v-for="item2 in item.SubSkillPoint" class="am-u-lg-12">
                        <div v-if="item2.SubSkillPoint.length > 0">
                            <div class="am-u-lg-12">
                                <label>{{item2.Name}}</label>
                            </div>
                            <div v-for="item3 in item2.SubSkillPoint" class="am-u-lg-12">
                                <div class="am-u-lg-2">
                                    <label>{{item3.Name}}</label>
                                </div>
                                <div class="am-form-group am-u-lg-10">
                                    <label class="am-radio-inline am-danger detail-labels">
                                <input type="radio" v-bind:name="item3.Id" value="1"> 了解
                            </label>
                                    <label class="am-radio-inline am-danger detail-labels ">
                                <input type="radio" v-bind:name="item3.Id" value="2"> 掌握
                            </label>
                                    <label class="am-radio-inline am-danger detail-labels">
                                <input type="radio" v-bind:name="item3.Id" value="3"> 深入
                            </label>
                                </div>
                            </div>
                        </div>
                        <div v-else>
                            <div class="am-u-lg-12">
                                <div class="am-u-lg-2 am-padding-0">
                                    <label>{{item2.Name}}</label>
                                </div>
                                <div class="am-form-group am-u-lg-10">
                                    <label class="am-radio-inline am-danger detail-labels">
                                        <input type="radio" v-bind:name="item2.Id" value="1"> 了解
                                    </label>
                                    <label class="am-radio-inline am-danger detail-labels ">
                                        <input type="radio" v-bind:name="item2.Id" value="2"> 掌握
                                    </label>
                                    <label class="am-radio-inline am-danger detail-labels">
                                        <input type="radio" v-bind:name="item2.Id" value="3"> 深入
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="sm" class="detail am-text-center">
            <div class="am-g am-container">
                <form class="am-form am-u-lg-6 am-u-lg-centered" data-am-validator>
                    <fieldset>
                        <legend>提交信息</legend>
                        <div class="am-form-group">
                            <input type="text" class="" id="ipt-num" v-model="EmpNum" data-validation-message="请输入您的工号" placeholder="请输入您的工号" required/>
                        </div>

                        <div class="am-form-group">
                            <input type="text" class="" id="ipt-name" v-model="EmpName" data-validation-message="请输入您的姓名" placeholder="请输入您的姓名" required/>
                        </div>
                </form>

            </div>
            <div class="am-g">
                <button type="button" style="min-width: 200px" class="am-btn am-btn-primary am-btn-lg" v-on:click="submit">提交</button>
            </div>
        </div>
    </div>
    <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">提示</div>
            <div class="am-modal-bd">
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn">确定</span>
            </div>
        </div>
    </div>
</body>
<script src="../libs/jquery/jquery.min.js"></script>
<script src="../libs/amazeui/js/amazeui.min.js"></script>
<script src="../libs/vue/vue.min.js"></script>
<script src="../libs/axios/axios.min.js"></script>
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<script src="../libs/lodash/lodash.min.js"></script>
<script src="../scripts/locations.js"></script>
<script src="../scripts/global.js"></script>
<script src="../scripts/index.js"></script>

</html>